﻿@{
    ViewBag.Title = "Budget";
}

<script>
    function BudgetController($scope) {
        var self = $scope;

        self.activities = [
            { name: "Science" },
            { name: "Work" },
            { name: "Project 1" },
            { name: "Fun" }
        ];

        self.days = [
            {
                name: "Working", timeBudget: 16, activities: [
                   { name: "Science", timeBudget: 10 },
                   { name: "Work", timeBudget: 8 },
                   { name: "Reading", timeBudget: 3 }
                ],
                leftTime: function () {
                    var i = 1;
                    return 5;
                }
            },

            {
                name: "Weekend", timeBudget: 18, activities: [
                   { name: "Science", timeBudget: 16 },
                   { name: "Reading", timeBudget: 3 }
                ],
                leftTime: function () {
                    var i = 1;
                    return 5;
                }
            },

            {
                name: "Holiday", timeBudget: 15, activities: [
                   { name: "Reading", timeBudget: 3 }
                ],
                leftTime: function () {
                    var i = 1;
                    return 5;
                }
            },
        ];

        self.addNewActivity = function () {
            self.activities.push({ name: 'Fun' });
        }

        self.valueChanged = function () {
            alert("changesd")
        }
    };
    
    angular.module('TimeTracker', []);
    $(function() {
        $('#accordion').accordion();
    });

    // drag and drop functionality begin
    window.onload = function () {
        bootstrap();
    }

    var bootstrap = function () {
        if (Modernizr && Modernizr.draganddrop) {
            console.log("drag and drop supports well");
        } else {
            console.log("no drag and drop support");
        }

        var dragSrcEl = null;

        function handleDragStart(e) {
            this.style.opacity = '0.4';

            dragSrcEl = this;

            e.dataTransfer.affectAllowed = 'move';
            e.dataTransfer.setData('text/html', this.innerHTML);
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }

            e.dataTransfer.dropEffect = 'move';

            return false;
        }

        function handleDragEnter(e) {
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over');
        }

        function handleDrop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }

            if (dragSrcEl != null) {
                dragSrcEl.innerHTML = this.innerHTML;
                this.innerHTML = e.dataTransfer.getData('text/html');
            }

            return false;
        }

        function handleDragEnd(e) {
            [].forEach.call(cols, function (col) {
                col.classList.remove('over');
            });
        }

        var cols = document.querySelectorAll('#columns .column');
        [].forEach.call(cols, function (col) {
            col.addEventListener('dragstart', handleDragStart, false);
            col.addEventListener('dragenter', handleDragEnter, false);
            col.addEventListener('dragover', handleDragOver, false);
            col.addEventListener('dragleave', handleDragLeave, false);
            col.addEventListener('drop', handleDrop, false);
            col.addEventListener('dragend', handleDragEnd, false);
        });
    }
    // drag end drop functionality end
</script>

<style>
    .left-panel {
        background-color: #fefefe;
        float: left;
        width: 180px;
        margin-right: 10px;
    }

    .main-panel {
        background-color: #fefefe;
        float: left;
        width: 530px;
        height: 400px;
    }
</style>

<section ng-controller="BudgetController">

    <aside class="left-panel">
        <ul>
            <li draggable="true" ng-repeat="activity in activities">{{activity.name}}</li>
            <li><button ng-click="addNewActivity()">Add</button></li>
        </ul>
    </aside>

    <section class="main-panel">
        <ul id="accordion">
            <li ng-repeat="day in days" class="dropable">
                <h3>{{day.name}} ({{day.timeBudget}})</h3>
                <div>
                    <ul>
                        <li ng-repeat="activity in day.activities">
                            {{activity.name}} <input type ="number" ng-model="activity.timeBudget"/> {{activity.timeBudget}}
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </section>
</section>